<template>
  <div class="system-edit-dept-container">
      <vxe-modal v-model="isShowDialog" :title="(ruleForm.RecordID!==0?'修改':'添加')+'供应商'" width="770"
                 height="400" show-zoom resize remember showFooter>
      <vxe-form :span="ruleForm.RecordID===0?12:24" :data="ruleForm" ref="formRef"  size="small" title-width="100" :rules="rules"    >
        <vxe-form-item title="供应商名称" clearable field="F100" :item-render="{name:'$input'}">        </vxe-form-item>
        <vxe-form-item span="12" title="供应商编码" clearable field="F484" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="专管员" clearable field="F561" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="专管员编码" clearable field="F563" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="分管部门" clearable field="F562" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="分管部门编码" clearable field="F564" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="供应商分类" clearable field="F576" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="供应商分类编码" clearable field="F577" :item-render="{name:'$input'}"></vxe-form-item>

        <vxe-form-item  span="12" title="联系人" clearable field="F113" :item-render="{name:'$input'}"></vxe-form-item>
        <vxe-form-item  span="12" title="手机号" clearable field="F114" :item-render="{name:'$input'}">  </vxe-form-item>
      </vxe-form>
      <template #footer>
				<span class="dialog-footer">
<!--					<el-button style="float: left" @click="reSetManager" size="default">重置联系人账号密码</el-button>-->
					<vxe-button @click="onCancel" size="small">取 消</vxe-button>
				 <vxe-button @click="onSubmit" status="primary" size="small">{{ ruleForm.RecordID !== 0 ? '修 改' : '添 加' }}</vxe-button>
				</span>
      </template>

      </vxe-modal>
    <DataGridSelect ref="DGE" :isequipment="true" @submit="getSourceData"></DataGridSelect>
  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, reactive, ref, toRefs, unref} from 'vue';
import {addDept, editDept, getDeptList,getFieldsinfo} from "/@/api/linkoo/supplier/manager";
import {ElMessage} from "element-plus";
import XEUtils from "xe-utils";
import {Plus} from '@element-plus/icons-vue'
import {onMounted} from "@vue/runtime-core";
import DataGridSelect from "/@/views/linkoo/components/select.vue";
// 定义接口来定义对象的类型
interface TableDataRow {
  deptName: string;
  id: number;
  parentId: number;
  children?: TableDataRow[];
}

interface RuleFormState {
  RecordID: number,
  StatusCode:number,
  F100:string,
  F113:string,
  F114:string,
  F484:string,
  F561:string,
  F562:string,
  F563:string,
  F564:string,
  F576:string,
  F577:string

}

interface DeptSate {
  isShowDialog: boolean;
  ruleForm: RuleFormState;
  deptData: Array<TableDataRow>;
  rules: object;
  item: object;
  key:string;
}

export default defineComponent({
  name: 'systemEditDept',
  components:{DataGridSelect},
  setup(prop, {emit}) {
    const {proxy} = getCurrentInstance() as any;
    const formRef = ref();
    let DGE = ref(null)
    const state = reactive<DeptSate>({
      key:'',
      isShowDialog: false,
      item:{},
      ruleForm: {
        RecordID: 0,
        StatusCode:0,
        F100:'',
        F113:'',
        F114:'',
        F484:'',
        F561:'',
        F562:'',
        F563:'',
        F564:'',
        F576:'',
        F577:''
      },
      deptData: [], // 供应商数据
      rules: {
        F100: [
          {required: true, message: "供应商名称不能为空", trigger: "blur"},
        ],
        F113:[
          {required: true, message: "联系人不能为空", trigger: "blur"},
        ],
        F114:[
          {required: true, message: "联系人手机号不能为空", trigger: "blur"},
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    });
    onMounted(()=>{
      getFieldsinfo(100).then(res=>{
        state.item=res.data.source
      })


    })
    // 打开弹窗
    const openDialog = (row:any) => {
      resetForm()
      if(row!==undefined ){
        state.ruleForm['RecordID'] = row['deptId'];
        state.ruleForm['StatusCode'] = row['status'];
        state.ruleForm['F100'] = row['deptName'];
        state.ruleForm['F113'] = row['leader'];
        state.ruleForm['F114'] = row['phone'];
      }

      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const reSetManager = () => {
      closeDialog();
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const onSubmit = async () => {
      const errMap = await formRef.value.validate()
      if (errMap) {
        return
      }
          if (state.ruleForm.RecordID === 0) {
            //添加
            addDept(state.ruleForm).then(() => {
              ElMessage.success('供应商添加成功');
              closeDialog(); // 关闭弹窗
              emit('deptList')
            });
          } else {
            //修改
            editDept(state.ruleForm).then(() => {
              ElMessage.success('供应商修改成功');
              closeDialog(); // 关闭弹窗
              emit('deptList')
            });
          }

    };
    const resetForm = () => {
      state.ruleForm = {
        RecordID: 0,
        StatusCode:0,
        F100:'',
        F113:'',
        F114:'',
        F484:'',
        F561:'',
        F562:'',
        F563:'',
        F564:'',
        F576:'',
        F577:''

      }
    };

    const showSource = async (item:any) => {
      state.key=item
      DGE.value.Data = Object.assign({}, {field: state.item, value: '', data: state.ruleForm})
      DGE.value.todo()
      DGE.value.keyword=''
      // this.$refs.DGE.showDialog = true
      //state.selectDataGridTarget = {field: item, target: target, ref: ref}
    }
    const getSourceData = ({data}) => {
       state.ruleForm['F100']=data[0]["供应商名称"]
       state.ruleForm['F113']=data[0]["联络人"]
       state.ruleForm['F114']=data[0]["联络方式"]
       state.ruleForm['F484']=data[0]["供应商编码"]
       state.ruleForm['F561']=data[0]["专管员"]
       state.ruleForm['F562']=data[0]["分管部门"]
       state.ruleForm['F563']=data[0]["专管员编码"]
       state.ruleForm['F564']=data[0]["分管部门编码"]
       state.ruleForm['F576']=data[0]["供应商分类"]
       state.ruleForm['F577']=data[0]["供应商分类编码"]


    }
    return {
      openDialog,
      closeDialog,
      reSetManager,
      onCancel,
      onSubmit,
      showSource,
      getSourceData,
      formRef,DGE,Plus,
      ...toRefs(state),
    };
  },
});
</script>
